<!--<template>-->
<!--  <div class="app">-->
<!--    <el-carousel :interval="40000" type="fard" height="360px">-->
<!--      <el-carousel-item v-for="(picture, index) in pictures" :key="index">-->
<!--        <img :src="picture" :alt="'Image ' + index">-->
<!--      </el-carousel-item>-->
<!--    </el-carousel>-->
<!--  </div>-->
<!--</template>-->

<!--<script>-->
<!--export default {-->
<!--  name: "AppCarousel",-->
<!--  data() {-->
<!--    return {-->
<!--      pictures: ['https://img2.baidu.com/it/u=374375480,4064397600&fm=253&fmt=auto&app=138&f=JPG?w=860&h=484',-->
<!--        'https://img2.baidu.com/it/u=374375480,4064397600&fm=253&fmt=auto&app=138&f=JPG?w=860&h=484',-->
<!--        'https://img2.baidu.com/it/u=374375480,4064397600&fm=253&fmt=auto&app=138&f=JPG?w=860&h=484'-->


<!--      ]-->
<!--    }-->
<!--  }-->
<!--}-->
<!--</script>-->

<!--<style>-->

<!--.app {-->
<!--  margin-top: 100px;-->
<!--}-->

<!--.el-carousel__item {-->
<!--  display: flex; /* 使用 flexbox 来居中内容 */-->
<!--  justify-content: center; /* 水平居中 */-->
<!--  align-items: center; /* 垂直居中 */-->
<!--  text-align: center; /* 如果需要的话，确保文本也居中 */-->
<!--  height: 100%; /* 确保轮播项占据整个轮播容器的高度 */-->
<!--}-->

<!--.el-carousel__item img {-->
<!--  max-width: 100%;-->
<!--  max-height: 100%;-->

<!--}-->

<!--/*.sidebar {*/-->
<!--/*  flex: 0 0 auto; !* 不伸缩，保持原始大小 *!*/-->
<!--/*  width: 200px; !* 设定一个合适的宽度 *!*/-->
<!--/*  background-color: #f5f5f5; !* 设定背景色，可根据需要调整 *!*/-->
<!--/*  padding: 10px; !* 添加内边距 *!*/-->
<!--/*}*/-->

<!--/*.left-sidebar {*/-->
<!--/*  margin-right: 10px; !* 右侧留出间隔 *!*/-->
<!--/*}*/-->

<!--/*.right-sidebar {*/-->
<!--/*  margin-left: 10px; !* 左侧留出间隔 *!*/-->
<!--/*}*/-->

<!--/*.el-carousel {*/-->
<!--/*  flex: 1 1 auto; !* 伸缩，占据剩余空间 *!*/-->
<!--/*  margin: 0 10px; !* 两侧留出间隔 *!*/-->
<!--/*}*/-->

<!--</style>-->

<template>
	<div class="container">
		<div class="left-sidebar">
			<!-- 热卖产品列表 -->
			<div class="hot-recommendation">今日热搜榜</div>
			<div class="outer-box">
				<div class="inner-box">
					<img src="https://cdn.shujie.me/isbn/500/601/9787500601593_69.jpg!w600" alt="">
					<p>红岩</p>
				</div>
				<div class="inner-box">
					<img src="https://cdn.shujie.me/book/2023/12/24/02/21480410_qik7e64o4jlj9o59.jpg!w600" alt="">
					<p>钢铁是怎样炼成的</p>
				</div>
				<div class="inner-box">
					<img src="	https://cdn.shujie.me/isbn/508/499/9787508499345_71.jpg!w600" alt="">
					<p>CET4过关特训</p>
				</div>
				<div class="inner-box">
					<img src="https://cdn.shujie.me/isbn/040/396/9787040396638_67.jpg!w600" alt="">
					<p>高等数学</p>
				</div>
				<div class="inner-box">
					<img src="https://cdn.shujie.me/isbn/030/208/9787030208248_16.jpg!w600" alt="">
					<p>计算机组成原理</p>
				</div>
				<div class="inner-box">
					<img src="	https://cdn.shujie.me/isbn/100/034/9787100034777_02.jpg!w600" alt="">
					<p>现代汉语词典</p>
				</div>
			</div>
			<!-- 轮播图 -->
		</div>
		<div class="carousel-container">
			<el-carousel :interval="4000" type="fard" height="480px">
				<el-carousel-item v-for="(picture, index) in pictures" :key="index">
					<img :src="picture" :alt="'Image ' + index">
				</el-carousel-item>
			</el-carousel>
		</div>
		<div class="right-sidebar">
			<!-- 帮助导航 -->
			<div class="entrance">
				<div class="row">
					<ul>
						<li>
							<router-link to="/assist">
								<img src="	https://www.imaijp.com/images/imaup/entrance-icon2.png?v=20240412">
								帮助中心
							</router-link>
						</li>
						<li>
							<router-link to="/help">
								<img src="https://www.imaijp.com/images/imaup/entrance-icon6.png?v=20240412">
								新手指南
							</router-link>
						</li>
						<li>
							<router-link to="/Shopping">
								<img src="https://www.imaijp.com/images/imaup/entrance-icon4.png?v=20240412">
								购物流程
							</router-link>
						</li>
					</ul>
				</div>
			</div>

			<!--      公告-->
			<div class="notice-board">
				<h3>最新公告</h3>
				<div class="notice-content">
					<li>1.我们近期对平台进行了全面的升级与优化......</li>
					<li>2.作为校园内的二手交易平台，我们一直致力于推广环保理念......</li>
					<li>3.为了确保平台的公平、公正，我们强烈倡导诚信交易</li>
				</div>
			</div>
			<div class="notice-board">
				<h3>活动预告</h3>
				<div class="notice-content">
					<li>1.本月底将举办一场环保知识竞赛。竞赛将以线上形式进行，题目涵盖环保知识、二手交易技巧等多个方面...</li>
					<li>2.5月4日，在学校操场举办一场二手交易市集，届时将有大量......</li>
					<li>3.毕业季二手书活动预告</li>
				</div>
			</div>
		</div>
	</div>



</template>

<script>
	export default {
		name: "AppCarousel",
		data() {
			return {
				pictures: [
					'https://img2.baidu.com/it/u=374375480,4064397600&fm=253&fmt=auto&app=138&f=JPG?w=860&h=484',
					'https://appwk.baidu.com/naapi/doc/view?ih=810&o=jpg_6&iw=1440&ix=0&iy=0&aimw=1440&rn=1&doc_id=6910b15c02d8ce2f0066f5335a8102d276a261a9&pn=1&sign=3ad3f851891525f9b56ae8a12dec7b43&type=1&app_ver=2.9.8.2&ua=bd_800_800_IncredibleS_2.9.8.2_2.3.7&bid=1&app_ua=IncredibleS&uid=&cuid=&fr=3&Bdi_bear=WIFI&from=3_10000&bduss=&pid=1&screen=800_800&sys_ver=2.3.7',
					'https://img2.baidu.com/it/u=374375480,4064397600&fm=253&fmt=auto&app=138&f=JPG?w=860&h=484'

				]
			};
		},
		methods: {
			assist() {
				// this.$router.push({
				// 	path: '/assist'
				// });
				this.$router.push({
					path: '/assist'
				})
			}
		}
	};
</script>

<style scoped>
	.container {
		display: flex;
		margin-top: 80px;
		height: 490px;
		width: 1200px;
		margin-left: auto;
		margin-right: auto;
		border: 1px solid #ccc;
		justify-content: center;
		border-radius: 10px;

	}

	.left-sidebar,
	.right-sidebar {
		flex: 0 0 240px;
		/* 设置固定宽度 */
		height: 100%;
		/*border: 1px solid #ccc; !* 为侧边盒子设置1px实线边框 *!*/
		padding: 10px;
		box-sizing: border-box;
		/* 确保边框和内边距不会增加盒子的宽度 */
	}

	.right-sidebar {
		flex: 0 0 230px;
		/* 右边设置为200px */
	}

	.carousel-container {
		flex: 1 1 auto;
		/* 伸缩以填充剩余空间 */
		height: 100%;
		/*border: 1px solid black; !* 为轮播图容器设置1px实线边框 *!*/
		overflow: hidden;
		/* 确保轮播图不会超出容器 */
		justify-content: center;
	}

	.el-carousel__item {
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
		height: 100%;
		/* 确保轮播项占据整个轮播容器高度 */
	}

	.el-carousel__item img {
		max-width: 100%;
		max-height: 100%;

	}

	/*右边*/
	.entrance {
		height: 70px;
		border: solid 1px #cfcfcf;
		display: flex;
		justify-content: space-between;
		padding-top: -20px;
		border-radius: 10px
	}

	.entrance .row {
		width: 100%;
	}

	.entrance ul {
		list-style-type: none;
		padding: 0;
		margin: 0;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		height: 50%;
		/* 设置高度为50% */
	}

	.entrance ul li {
		float: left;
		text-align: center;
		list-style-type: none;
		width: 33.33%;
	}

	.entrance ul li a {
		display: block;
		text-align: center;
		padding: 2px 0;
		text-decoration: none;
		font-size: 12px;
		/* 缩小字体 */
		color: black;
		width: 100%;
	}

	.entrance ul li a:hover {
		color: red;
		/* 鼠标悬停时变为红色 */
	}

	.entrance ul li img {
		display: block;
		margin: 0 auto 1px;
	}


	.notice-board {
		width: 230px;
		border: 1px solid #ccc;
		padding: 10px;
		margin-bottom: 10px;
		position: relative;

	}

	.notice-board h3 {
		color: #333;
		margin: 0;
		line-height: 1.2;

	}

	.notice-content li {
		list-style-type: none;
		margin-top: 5px;
		margin-bottom: 10px;
		line-height: 1.2;
		font-size: 15px;
		text-indent: 1em;
	}




	.notice-content li a {
		text-decoration: none;
		color: #666;
	}

	/*左边*/
	.outer-box {
		width: 220px;
		height: 450px;
		display: flex;
		flex-wrap: wrap;
	}

	.inner-box {
		width: 45%;
		height: 30%;
		margin: 4px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		/*padding-top: 13px;*/
		align-self: center;
		border: solid 1px #cfcfcf;
		border-radius: 10px
	}

	.inner-box img {
		width: 81px;
		height: 101.1px;
		align-self: center;
		padding-top: 12px;
	}

	p {
		text-align: center;
		font-size: 12px;
		/* 设置字体大小为12px */
		margin-top: 5px;
	}

	.hot-recommendation {
		font-size: 16px;
		/* 设置字体大小 */
		font-weight: bold;
		/* 字体加粗 */
		color: #333;
		/* 设置字体颜色 */
		text-align: center;
		/* 文本居中对齐 */
		border-bottom: 1px solid #eee;
		/* 下边框 */

	}

	.title1 {
		height: 30px;
		width: 1200px;
		border: 1px solid black;
	}

	/*.new-box {*/
	/*  height: 60px;*/
	/*  width: 1200px;*/
	/*  margin-left: auto;*/
	/*  margin-right: auto;*/
	/*  border: 1px solid black;*/
	/*}*/
</style>